---
name: 'Resources'
---

# Resources

Tools, themes, extensions and examples built by the Theme UI community.

## Custom themes

- [**@tabetalt/kit**](https://github.com/tabetalt/kit):
  Used in Tabetalt’s e-commerce platform.
- [**@hackclub/theme**](https://theme.hackclub.com):
  Used on [Hack Club’s](https://hackclub.com/) websites.
  - [Forked](https://github.com/the-innovation-circuit/theme) by [the Innovation Circuit](https://innovationcircuit.com).
- [**@carbonplan/theme**](https://github.com/carbonplan/theme):
  Used on [Carbonplan’s](https://carbonplan.org) websites.
- [**@undataforum/preset**](https://github.com/UNDataForum/design-system/tree/master/packages/preset):
  Used on [United Nations World Data Forum](https://undataforum.org/).
- [**theme-ui-preset-geist**](https://github.com/lachlanjc/theme-ui-preset-geist):
  Inspired by/adapted from [Geist UI](https://geist-ui.dev).
- [**theme-ui-preset-nice-boys**](https://github.com/nice-boys/theme-ui-preset-nice-boys)
- [**indivorg/theme**](https://github.com/indivorg/theme):
  Used in Indiv's mobile and web applications.  

## Component kits

- [**@component-controls/components**](https://github.com/ccontrols/component-controls/tree/master/ui/components):
  Components built for Theme UI.
- [**@cartolab/elements**](https://github.com/cartolab-gis/elements):
  Themeable React components for map-based web applications.
- [**@carbonplan/components**](https://github.com/carbonplan/components):
  Shared React components for [Carbonplan](https://carbonplan.org).
- [**@undataforum/components**](https://github.com/UNDataForum/design-system/tree/master/packages/components):
  Shared React components for UN Data Forum.
- [**prestyled**](https://github.com/pixelmord/prestyled)

## Theme previewers

- [**Theme UI Gallery**](https://theme-ui-gallery.netlify.app):
  Themed components live previewer.
- [**Skin UI**](https://www.skin-ui.com/):
  Theme UI live previewer & code editor.
- [**Oh My Theme**](https://www.oh-my-theme.com/):
  Theme UI preset previewer.
- [**Components.ai Theme Generator**](https://components.ai/theme-ui/):
  Generate, preview, & export random themes.
- [**Controlled Styled Editor**](https://github.com/Palmaswell/controlled-styled-editor):
  Edit your React components based on System UI constrained design principles.

## Project templates

### Next.js

- [**@lachlanjc/next-theme-starter**](https://github.com/lachlanjc/next-theme-starter):
  Next.js project for getting started with MDX & Theme UI.
- [**@hackclub/theme-starter**](https://github.com/hackclub/theme-starter):
  Next.js project using [Hack Club Theme](https://theme.hackclub.com) & MDX.
- [**Next.js MDX Blog Starter**](https://github.com/johnpolacek/nextjs-mdx-blog-starter):
  Next.js blog starter for building blogs with MDX, Theme UI, & Vercel.
- [**@mattjennings/nextjs-starter**](https://github.com/mattjennings/nextjs-starter):
  Next.js project using Theme UI & Framer Motion.
- [**Next.js Frontend Starter Pack**](https://github.com/freddydumont/theme-ui-next-boilerplate):
  Next.js site template using TypeScript, Jest, & Theme UI.

### Remix

- [**Remix Examples: Theme UI**](https://github.com/remix-run/remix/tree/main/examples/theme-ui)

### Gatsby

- [**LekoArts Gatsby Themes**](https://github.com/LekoArts/gatsby-themes):
  Collection of Gatsby themes built with Theme UI.
- [**@hew/gatsby-theme-ui-starter**](https://github.com/hew/gatsby-theme-ui-starter):
  Gatsby.js project using Netlify Forms.
- [**@codebushi/gatsby-theme-document**](https://github.com/codebushi/gatsby-theme-document):
  Gatsby.js theme for documentation.
- [**gatsby-theme-glossary**](https://github.com/johno/gatsby-theme-glossary):
  Gatsby.js theme for a glossary to define terminology.

## Other projects

- [**theme-ui-native**](https://github.com/samjbmason/theme-ui-native):
  Theme UI adapted for React Native projects.
- [**Dripsy**](https://github.com/nandorojo/dripsy):
  A responsive, theme-based design system for Expo + React Native Web.
- [**Theme UI plugin for Figma**](https://github.com/LekoArts/figma-theme-ui):
  [Figma plugin](https://www.figma.com/c/plugin/797015796747379907) to convert a Theme UI config to Figma Styles.
- [**@fabulas/theme-ui-modifiers**](https://github.com/fabulascode/theme-ui-modifiers):
  Library for using BEM-style modifiers on Theme UI components.
- [**@mattjennings/react-modal**](https://github.com/mattjennings/react-modal):
  Library for making animated modals with Theme UI & Framer Motion.
- [**React Layouts**](https://react-layouts.com/):
  Grab-and-go layouts for React, including Theme UI.
- [**Next Theme UI**](https://github.com/cobraz/next-theme-ui):
  Components for using Theme UI with Next.js.
- [**MDXP**](https://0phoff.github.io/MDXP):
  MDX-based presentation deck library using the System UI Theme Specification for theming.
